<template>
  <div class="video_list" ref="wrapper">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <template v-for="i in listData">
          <tpm :key="i.id" :i="i" :checkPlay="true" />
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import tpm from "../components/TopicItem";
export default {
  name: "video-list",
  props: ["cate"],
  components: { tpm },
  data() {
    return {
      listData: [],
      isLoading: false,
      page: 1,
      loading: false,
      finished: false,
      paddingTop: 0,
      scroll: 0
    };
  },
  activated() {
    this.$refs.wrapper.scrollTop = this.scroll;
  },
  methods: {
    saveScroll() {
      let wrapperScrollTop = this.$refs.wrapper.scrollTop;
      this.scroll = wrapperScrollTop;
    },
    postCollect() {
      this.$api.PostCollect(this.top.id).then(r => {
        if (r.data.code == 0) {
          if (r.data.info.id) {
            this.$toast("收藏成功~");
          } else {
            this.$toast("已取消收藏~");
          }
        }
      });
      return;
    },
    onLoad() {
      this.indexList();
    },
    onRefresh() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      this.page = 1;
      this.finished = false;
      this.listData = [];
      this.indexList();
    },
    todetail(row) {
      this.saveScroll();
      this.$router.push({ name: "detail", params: row });
    },
    changeType(name, title) {
      this.saveScroll();
      // console.log(name, title);
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      this.page = 1;
      this.finished = false;
      this.listData = [];
      this.indexList();
    },
    indexList() {
      this.$api
        .GetVideoList({
          tag: this.cate,
          p: this.page++,
          type: 5
        })
        .then(r => {
          r.data.info.map(e => (e.current = 1));
          this.listData = [...this.listData, ...r.data.info];
          this.isLoading = false;
          this.loading = false;
          if (r.data.info.length == 0) this.finished = true;
          this.$toast.clear();
        });
    }
  }
};
</script>

<style lang="less" scoped>
.video_list {
  height: calc(100vh - 40px);
  min-height: calc(100vh - 40px);
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
</style>
